Solid Router: Опанування клієнтською навігацією в SolidJS

SolidJS, відомий своєю винятковою продуктивністю та простотою, надає фантастичну основу для створення сучасних веб-застосунків. Щоб створювати справді захопливий та зручний для користувача досвід, необхідний надійний клієнтський маршрутизатор. Зустрічайте Solid Router, офіційний та рекомендований маршрутизатор для SolidJS, розроблений для безшовної інтеграції з реактивними принципами фреймворку.

Цей вичерпний посібник занурить вас у світ Solid Router, охоплюючи все: від базового налаштування до просунутих технік для створення складних та динамічних односторінкових застосунків (SPA). Незалежно від того, чи ви досвідчений розробник SolidJS, чи тільки починаєте, ця стаття надасть вам знання та навички для опанування клієнтською навігацією.

Що таке Solid Router?

Solid Router — це легкий та продуктивний клієнтський маршрутизатор, спеціально розроблений для SolidJS. Він використовує реактивність SolidJS для ефективного оновлення інтерфейсу користувача на основі змін URL-адреси браузера. На відміну від традиційних маршрутизаторів, які покладаються на порівняння віртуального DOM, Solid Router безпосередньо маніпулює DOM, що призводить до швидшої та більш передбачуваної продуктивності.

Ключові особливості Solid Router:

• Декларативна маршрутизація: Визначайте свої маршрути за допомогою простого та інтуїтивно зрозумілого API на основі JSX.
• Динамічна маршрутизація: Легко обробляйте маршрути з параметрами, що дозволяє створювати динамічні та керовані даними застосунки.
• Вкладені маршрути: Організовуйте свій застосунок у логічні секції за допомогою вкладених маршрутів.
• Компонент посилання: Безшовно переходьте між маршрутами за допомогою компонента <A>, який автоматично обробляє оновлення URL та стилізацію активних посилань.
• Завантаження даних: Асинхронно завантажуйте дані перед рендерингом маршруту, забезпечуючи плавний користувацький досвід.
• Переходи: Створюйте візуально привабливі переходи між маршрутами для покращення користувацького досвіду.
• Обробка помилок: Витончено обробляйте помилки та відображайте кастомні сторінки помилок.
• Інтеграція з History API: Безшовна інтеграція з History API браузера, що дозволяє користувачам переходити вперед і назад за допомогою кнопок.

Початок роботи з Solid Router

Встановлення

Щоб встановити Solid Router, використовуйте ваш улюблений менеджер пакунків:

            npm install @solidjs/router
yarn add @solidjs/router
pnpm add @solidjs/router
            

              
                Copy
              
            
          

Базове налаштування

Ядро Solid Router обертається навколо компонентів <Router> та <Route>. Компонент <Router> діє як корінь системи маршрутизації вашого застосунку, тоді як компоненти <Route> визначають відповідність між URL-адресами та компонентами.

Ось базовий приклад:

            import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <Route path="/"> <Home/> </Route>
      <Route path="/about"> <About/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

У цьому прикладі компонент <Router> огортає весь застосунок. Компоненти <Route> визначають два маршрути: один для кореневого шляху ("/") та інший для шляху "/about". Коли користувач переходить за одним із цих шляхів, буде відрендерено відповідний компонент (Home або About).

Компонент <A>

Для навігації між маршрутами використовуйте компонент <A>, наданий Solid Router. Цей компонент схожий на звичайний HTML-тег <a>, але він автоматично обробляє оновлення URL та запобігає повному перезавантаженню сторінки.

            import { A } from '@solidjs/router';

function Navigation() {
  return (
    <nav>
      <A href="/">Home</A>
      <A href="/about">About</A>
    </nav>
  );
}

export default Navigation;
            

              
                Copy
              
            
          

Коли користувач натискає на одне з цих посилань, Solid Router оновить URL-адресу браузера та відрендерить відповідний компонент, не викликаючи повного перезавантаження сторінки.

Просунуті техніки маршрутизації

Динамічна маршрутизація з параметрами маршруту

Solid Router підтримує динамічну маршрутизацію, що дозволяє створювати маршрути з параметрами. Це корисно для відображення контенту на основі певного ID або слагу.

            import { Router, Route } from '@solidjs/router';
import UserProfile from './components/UserProfile';

function App() {
  return (
    <Router>
      <Route path="/users/:id"> <UserProfile/> </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

У цьому прикладі сегмент :id у шляху є параметром маршруту. Щоб отримати доступ до значення параметра id у компоненті UserProfile, ви можете використати хук useParams:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

Хук useParams повертає об'єкт, що містить параметри маршруту. У цьому випадку params.id міститиме значення параметра id з URL. Потім хук createResource використовується для отримання даних користувача на основі ID.

Міжнародний приклад: Уявіть собі глобальну платформу електронної комерції. Ви можете використовувати динамічну маршрутизацію для відображення деталей продукту на основі ID продукту: /products/:productId. Це дозволяє легко створювати унікальні URL-адреси для кожного продукту, полегшуючи користувачам обмін та додавання в закладки конкретних товарів, незалежно від їхнього місцезнаходження.

Вкладені маршрути

Вкладені маршрути дозволяють організувати ваш застосунок у логічні секції. Це особливо корисно для складних застосунків з кількома рівнями навігації.

            import { Router, Route } from '@solidjs/router';
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Route path="/dashboard">
        <Dashboard/>
        <Route path="/profile"> <Profile/> </Route>
        <Route path="/settings"> <Settings/> </Route>
      </Route>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

У цьому прикладі компонент <Dashboard> діє як контейнер для компонентів <Profile> та <Settings>. Маршрути <Profile> та <Settings> вкладені в маршрут <Dashboard>, що означає, що вони будуть відрендерені тільки тоді, коли користувач перебуває на шляху "/dashboard".

Щоб відрендерити вкладені маршрути всередині компонента <Dashboard>, вам потрібно використати компонент <Outlet>:

            import { Outlet } from '@solidjs/router';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <A href="/dashboard/profile">Profile</A>
        <A href="/dashboard/settings">Settings</A>
      </nav>
      <Outlet/>
    </div>
  );
}

export default Dashboard;
            

              
                Copy
              
            
          

Компонент <Outlet> діє як заповнювач, де будуть рендеритися вкладені маршрути. Коли користувач переходить на "/dashboard/profile", компонент <Profile> буде відрендерений всередині компонента <Outlet>. Аналогічно, коли користувач переходить на "/dashboard/settings", компонент <Settings> буде відрендерений всередині компонента <Outlet>.

Завантаження даних за допомогою createResource

Асинхронне завантаження даних перед рендерингом маршруту є вирішальним для забезпечення плавного користувацького досвіду. Solid Router безшовно інтегрується з хуком createResource від SolidJS, роблячи завантаження даних легким процесом.

Ми вже бачили приклад цього в компоненті UserProfile раніше, але ось він знову для ясності:

            import { useParams } from '@solidjs/router';
import { createResource } from 'solid-js';

function UserProfile() {
  const params = useParams();
  const [user] = createResource(() => params.id, fetchUser);

  return (
    <div>
      <h1>User Profile</h1>
      {user() ? (
        <div>
          <p>Name: {user().name}</p>
          <p>Email: {user().email}</p>
        </div>
      ) : (<p>Loading...</p>)}
    </div>
  );
}

async function fetchUser(id: string) {
  const response = await fetch(`https://api.example.com/users/${id}`);
  return response.json();
}

export default UserProfile;
            

              
                Copy
              
            
          

Хук createResource приймає два аргументи: сигнал, який запускає завантаження даних, і функцію, яка ці дані отримує. У цьому випадку сигналом є () => params.id, що означає, що дані будуть завантажуватися щоразу, коли змінюється параметр id. Функція fetchUser отримує дані користувача з API на основі ID.

Хук createResource повертає масив, що містить ресурс (отримані дані) та функцію для повторного завантаження даних. Ресурс — це сигнал, який містить дані. Ви можете отримати доступ до даних, викликавши сигнал (user()). Якщо дані ще завантажуються, сигнал поверне undefined. Це дозволяє вам відображати індикатор завантаження, поки дані отримуються.

Переходи

Додавання переходів між маршрутами може значно покращити користувацький досвід. Хоча Solid Router не має вбудованої підтримки переходів, він добре інтегрується з бібліотеками, такими як solid-transition-group, для досягнення плавних та візуально привабливих переходів.

Спочатку встановіть пакет solid-transition-group:

            npm install solid-transition-group
yarn add solid-transition-group
pnpm add solid-transition-group
            

              
                Copy
              
            
          

Потім оберніть ваші маршрути компонентом <TransitionGroup>:

            import { Router, Route } from '@solidjs/router';
import { TransitionGroup, Transition } from 'solid-transition-group';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <TransitionGroup>
        <Route path="/">
          <Transition name="fade" duration={300}>
            <Home/>
          </Transition>
        </Route>
        <Route path="/about">
          <Transition name="fade" duration={300}>
            <About/>
          </Transition>
        </Route>
      </TransitionGroup>
    </Router>
  );
}

export default App;
            

              
                Copy
              
            
          

У цьому прикладі кожен маршрут обернутий компонентом <Transition>. Проп name вказує префікс CSS-класу для переходу, а проп duration — тривалість переходу в мілісекундах.

Вам потрібно буде визначити відповідні CSS-класи для переходу у вашій таблиці стилів:

            .fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
            

              
                Copy
              
            
          

Цей CSS-код визначає простий перехід появи/зникнення. Коли маршрут активується, застосовуються класи .fade-enter та .fade-enter-active, змушуючи компонент плавно з'являтися. Коли маршрут покидається, застосовуються класи .fade-exit та .fade-exit-active, змушуючи компонент плавно зникати.

Обробка помилок

Витончена обробка помилок є важливою для забезпечення гарного користувацького досвіду. Solid Router не має вбудованої обробки помилок, але ви можете легко реалізувати її за допомогою глобальної межі помилок (error boundary) або обробника помилок для конкретного маршруту.

Ось приклад глобальної межі помилок:

            import { createSignal, Suspense, ErrorBoundary } from 'solid-js';
import { Router, Route } from '@solidjs/router';
import Home from './components/Home';
import About from './components/About';

function App() {
  const [error, setError] = createSignal(null);

  return (
    <ErrorBoundary fallback={<p>Something went wrong: {error()?.message}</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Router>
          <Route path="/"> <Home/> </Route>
          <Route path="/about"> <About/> </Route>
        </Router>
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;
            

              
                Copy
              
            
          

Компонент <ErrorBoundary> перехоплює будь-які помилки, що виникають у його дочірніх елементах. Проп fallback вказує компонент, який потрібно відрендерити у випадку помилки. У цьому випадку він рендерить параграф із повідомленням про помилку.

Компонент <Suspense> обробляє незавершені проміси, що зазвичай використовується з асинхронними компонентами або завантаженням даних. Він відображає проп `fallback` доти, доки проміси не будуть вирішені.

Щоб викликати помилку, ви можете кинути виняток усередині компонента:

            function Home() {
  throw new Error('Failed to load home page');

  return <h1>Home</h1>;
}

export default Home;
            

              
                Copy
              
            
          

Коли цей код буде виконано, компонент <ErrorBoundary> перехопить помилку і відрендерить резервний компонент.

Міжнародні аспекти: При відображенні повідомлень про помилки враховуйте інтернаціоналізацію (i18n). Використовуйте бібліотеку для перекладу, щоб надавати повідомлення про помилки мовою, якій надає перевагу користувач. Наприклад, якщо користувач з Японії зіткнеться з помилкою, він повинен побачити повідомлення про помилку японською, а не англійською.

Найкращі практики використання Solid Router

• Організовуйте свої маршрути: Використовуйте вкладені маршрути для організації вашого застосунку в логічні секції. Це полегшить підтримку та навігацію по коду.
• Використовуйте параметри маршруту для динамічного контенту: Використовуйте параметри маршруту для створення динамічних URL-адрес для відображення контенту на основі певного ID або слагу.
• Завантажуйте дані асинхронно: Завантажуйте дані асинхронно перед рендерингом маршруту, щоб забезпечити плавний користувацький досвід.
• Додавайте переходи між маршрутами: Використовуйте переходи для покращення користувацького досвіду та надання вашому застосунку більш витонченого вигляду.
• Обробляйте помилки витончено: Реалізуйте обробку помилок для перехоплення та відображення їх у зручному для користувача вигляді.
• Використовуйте описові назви маршрутів: Вибирайте назви маршрутів, які точно відображають їхній вміст. Це полегшить розуміння структури вашого застосунку.
• Тестуйте свої маршрути: Пишіть юніт-тести, щоб переконатися, що ваші маршрути працюють коректно. Це допоможе вам виявляти помилки на ранніх стадіях та запобігати регресіям.

Висновок

Solid Router — це потужний та гнучкий клієнтський маршрутизатор, який безшовно інтегрується з SolidJS. Опанувавши його можливості та дотримуючись найкращих практик, ви зможете створювати складні та динамічні односторінкові застосунки, які забезпечують плавний та захопливий користувацький досвід. Від базового налаштування до просунутих технік, таких як динамічна маршрутизація, завантаження даних та переходи, цей посібник надав вам знання та навички для впевненої навігації у світі клієнтської маршрутизації в SolidJS. Прийміть силу Solid Router та розкрийте повний потенціал ваших застосунків на SolidJS!

Не забувайте звертатися до офіційної документації Solid Router для отримання найактуальнішої інформації та прикладів: [Посилання на документацію Solid Router - Заповнювач]

Продовжуйте створювати дивовижні речі з SolidJS!